<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的快件信息</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<style type="text/css">
	body{
		margin: 0;
		padding: 0;
		background-color: #eeeeee;
		font-family: "楷体";
	}
	.item{
		margin: 20px;
		margin-bottom: 50px;
	}
	.imte_top{
		text-align: center;
	}
	.imte_top>span{
		font-size:14px;
		display: inline-block;
		padding: 5px 12px;
		background-color: #ddd;
		color:#fff;
		border-radius: 5px;
	}
	.item_content{
		background-color: #fff;
		padding: 25px 15px;
		margin-top: 6px;
	}
	.item_content_top_1{
		font-size: 24px;
		font-weight: bold;
	}
	.item_content_top_2{
		color:#eee;
		font-size: 14px;
		margin: 5px 0px;
	}
	.item_content_top_3{
		margin: 10px 0px;
	}
	.item_content_top_4{
		margin: 10px 0px;
	}
	.item_content_bottom>a{
		text-decoration: none;
		color:#33e;
	}
</style>
</head>
<body>
	<div class="content" id="expressContent"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script>
	$(function (){
		$.getJSON("/front/findExpressByUserPhone.do",null,function (data){
			//得到后台给的map集合[状态:{数据}]
			if(data.status == -1){
				//跳转到首页
				var time=5;
				setInterval(function(){
					if(time==0){
						location.href="index.html";
					}else{
						layer.msg(data.result+",将在"+time+"秒后跳转");
						time--;
					}
				},1000);
			}
			loopShowStatus1(data.data.status1List);
			loopShowStatus2(data.data.status2List);
			loopShowStatus3(data.data.status3List);
		});
	});

	/*待取件*/
	function loopShowStatus1(expressInfo){
		for (i = 0; i < expressInfo.length; i++) {
			//下面就是前端的编写
			var item = "<div class=\"item\">\n" +
					"\t\t\t<div class=\"imte_top\"><span>" + expressInfo[i].inTime + "</span></div>\n" +
					"\t\t\t<div class=\"item_content\">\n" +
					"\t\t\t\t<div class=\"item_content_top\">\n" +
					"\t\t\t\t\t<div class=\"item_content_top_1\">取件通知</div>\n" +
					"\t\t\t\t\t<div class=\"item_content_top_2\">" + expressInfo[i].inTime + "</div>\n" +
					"\t\t\t\t\t<div class=\"item_content_top_3\">您有一个包裹到e栈了!</div>\n" +
					"\t\t\t\t\t<div class=\"item_content_top_4\">\n" +
					"\t\t\t\t\t\t取件码:<span style=\"color:#1f6dbd\">" + expressInfo[i].code + "</span><br>\n" +
					"\t\t\t\t\t\t快递公司:" + expressInfo[i].company + "<br>\n" +
					"\t\t\t\t\t\t运单号码:" + expressInfo[i].number + "<br>\n" +
					"\t\t\t\t\t\t站点电话:" + expressInfo[i].courierPhone + "<br>\n" +
					"\t\t\t\t\t\t取件地址:学校快件集散中心<br>\n" +
					"\t\t\t\t\t</div>\n" +
					"\t\t\t\t</div>\n" +
					"\t\t\t\t<hr>\n" +
					"\t\t\t\t<div class=\"item_content_bottom\">\n" +
					"\t\t\t\t\t<a href=\"/front/createQRCode.do?type=express&code=" + expressInfo[i].code + "\">二维码</a>\n" +
					"\t\t\t\t</div>\n" +
					"\t\t\t</div>\n" +
					"\t\t</div>";
			//每循环一个就增加一个item
			$("#expressContent").append($(item));//方式方法记住了 追击进去的方法
		}
	}

	function loopShowStatus2(expressInfo){
		for (i = 0; i < expressInfo.length; i++) {
			//下面就是前端的编写
			var item = "<div class=\"item\">\n" +
					"\t\t\t<div class=\"imte_top\"><span>"+expressInfo[i].outTime+"</span></div>\n" +
					"\t\t\t<div class=\"item_content\">\n" +
					"\t\t\t\t<div class=\"item_content_top\">\n" +
					"\t\t\t\t\t<div class=\"item_content_top_1\">取件成功通知</div>\n" +
					"\t\t\t\t\t<div class=\"item_content_top_2\">"+expressInfo[i].outTime+"</div>\n" +
					"\t\t\t\t\t<div class=\"item_content_top_3\">您有一个包裹从e栈取出了!</div>\n" +
					"\t\t\t\t\t<div class=\"item_content_top_4\">\n" +
					"\t\t\t\t\t\t快递公司:"+expressInfo[i].company+"<br>\n" +
					"\t\t\t\t\t\t运单号码:"+expressInfo[i].number+"<br>\n" +
					"\t\t\t\t\t\t站点电话:"+expressInfo[i].courierPhone+"<br>\n" +
					"\t\t\t\t\t</div>\n" +
					"\t\t\t\t</div>\n" +
					"\t\t\t\t<hr>\n" +
					"\t\t\t\t<div class=\"item_content_bottom\">\n" +
					"\t\t\t\t\t<a href=\"#\">有疑问 ? 点了也没用</a>\n" +
					"\t\t\t\t</div>\n" +
					"\t\t\t</div>\n" +
					"\t\t</div>";
			//每循环一个就增加一个item
			$("#expressContent").append($(item));//方式方法记住了 追击进去的方法
		}
	}
	function loopShowStatus3(expressInfo){
		for (i = 0; i < expressInfo.length; i++) {
			//下面就是前端的编写
			var item = "<div class=\"item\">\n" +
					"\t\t\t<div class=\"imte_top\"><span>"+expressInfo[i].inTime+"</span></div>\n" +
					"\t\t\t<div class=\"item_content\">\n" +
					"\t\t\t\t<div class=\"item_content_top\">\n" +
					"\t\t\t\t\t<div class=\"item_content_top_1\">快递状态未知，请联系快递员查询</div>\n" +
					"\t\t\t\t\t<div class=\"item_content_top_2\">"+expressInfo[i].outTime+"</div>\n" +
					"\t\t\t\t\t<div class=\"item_content_top_3\">您有一个包裹状态未知</div>\n" +
					"\t\t\t\t\t<div class=\"item_content_top_4\">\n" +
					"\t\t\t\t\t\t快递公司:"+expressInfo[i].company+"<br>\n" +
					"\t\t\t\t\t\t运单号码:"+expressInfo[i].number+"<br>\n" +
					"\t\t\t\t\t\t站点电话:"+expressInfo[i].courierPhone+"<br>\n" +
					"\t\t\t\t\t</div>\n" +
					"\t\t\t\t</div>\n" +
					"\t\t\t\t<hr>\n" +
					"\t\t\t\t<div class=\"item_content_bottom\">\n" +
					"\t\t\t\t\t<a href=\"#\">有疑问 ? 点了也没用</a>\n" +
					"\t\t\t\t</div>\n" +
					"\t\t\t</div>\n" +
					"\t\t</div>";
			//每循环一个就增加一个item
			$("#expressContent").append($(item));//方式方法记住了 追击进去的方法
		}
	}
</script>
</html>